<template>
  <div class="mains">
    <div class="info-classify">
      <headerBack>
        <b slot="my-center">升学资讯</b>
      </headerBack>
      <div class="sort flex-h">
        <div class="flex1" @click="rightSort">
          <i :style="showspecial==true?'color:#FFAD0D':''">{{leftLableName}}</i>
          <span v-show="showspecial==false" class="imgDown"></span>
          <span v-show="showspecial==true"  class="imgUp" ></span>
        </div>
        <div class="flex1" @click="leftSort">
          <i :style="showArea==true?'color:#FFAD0D':''">{{rightLableName}}</i>
          <span v-show="showArea==false"  class="imgDown" ></span>
          <span v-show="showArea==true" class="imgUp" ></span>
        </div>
      </div>
      <div class="bgMask" :style="zIn1" @click.stop="sseRight">
        <div class="maskBox" :style="lashen1">
          <div class="lable-box flex-h specich">
            <span
              :class="tabIndex===index?'active':''"
              v-for="(item,index) in lableList"
              :key="item.name"
              @click="tabLables(item.id,index,item.name)"
            >{{item.name}}</span>
          </div>
        </div>
      </div>
      <div class="bgMask" :style="zIn" @click.stop="sse">
        <div class="maskBox" :style="lashen">
          <div class="right-box">
            <scroller v-if="show8">
              <div class="lable-box flex-h right-lables" ref="lableHeight">
                <span
                  :class="tabRightIndex===$index?'active':''"
                  v-for="(item,$index) in rightlableList"
                  :key="item.name"
                  @click="clicklables(item.id,$index,item.name)"
                >{{item.name}}</span>
              </div>
            </scroller>
          </div>
        </div>
      </div>
      <scroller
        style="top: 1.72rem;"
        :on-refresh="refresh"
        :on-infinite="infinite"
        refresh-layer-color="@mainColor"
        loading-layer-color="@mainColor"
        ref="scrollerBottom"
        :noDataText="noDataText"
      >
        <div style="width: 7.5rem;height: auto;background:#fff;padding-top:0.3rem;">
          <infoList :newsData="articleInfoList" v-on:listenToNews="showTids"></infoList>
            <div v-show="articleInfoList.length==0 && showBlank">
            <div class="noDataImage">
              <img src="~@/static/nothing/empty_meiyoushuju.png" alt />
              <div class="describe">抱歉，这个页面暂无数据～</div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import infoList from "~/components/infoList";
import headerBack from "~/components/headerBack";
import {
  sectionTopicLabels,
  infosInSectionByProvince,
  infoHomePageMoreByProvince
} from "~/api/identity";
import ls from "store2";
import { format } from "~/plugins/filter";
export default {
  head() {
    return {
    };
  },
  components: {
    headerBack,
    infoList
  },
  data() {
    return {
      showBlank:false,
      noDataText:"",  
      leftLableName: "分类",
      rightLableName: "标签",
      currentPage: 1,
      sectionid: null,
      labelId: null,
      tabRightIndex: 0,
      tabIndex: 0,
      lableList: [
        {
          name: "全部",
          id: null
        }
      ],
      rightlableList: [
        {
          name: "全部",
          id: null
        }
      ],
      zIn: "",
      zIn1: "",
      lashen: "",
      lashen1: "",
      showArea: false,
      showspecial: false,
      show8: false,

 
      articleInfoList: [],
      pageCount: 0,
   
    };
  },
  created() {
    let list = JSON.parse(sessionStorage.getItem("lableList"));
    list = list.filter(item=>{
      return item.name ==='热点推荐'
    })
    this.lableList = this.lableList.concat(list);
  },
  mounted: function() {
    this.$visit("NewsList")
    if (sessionStorage.getItem("infoClaifyList")) {
      let objData = JSON.parse(sessionStorage.getItem("infoClaifyList"));
      this.leftLableName = objData.leftLableName;
      this.rightLableName = objData.rightLableName;
      this.currentPage = objData.currentPage;
      this.sectionid = objData.sectionid;
      this.labelId = objData.labelId;
      this.tabRightIndex = objData.tabRightIndex;
      this.tabIndex = objData.tabIndex;
      this.totalPages =objData.totalPages;
      this.rightlableList = objData.rightlableList;
      this.articleInfoList = objData.articleInfoList;
      this.totalLength = 10;
       this.noDataText="没有更多资讯了"
    } else {
      this.sectionTopicLabels();
      this.infosInSectionByProvince();
      this.infoHomePageMoreByProvince();
    }

  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm && vm.$refs.scrollerBottom) {
        //通过vm实例访问this
        setTimeout(function() {
          vm.$refs.scrollerBottom.scrollTo(0,vm.$store.state.recruitScrollY1,false);
        }, 0); //同步转异步操作
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    let scrolly = this.$refs.scrollerBottom.getPosition().top; //记录离开页面的位置
    this.$store.commit("changeRecruitScrollY1", scrolly); //离开路由时把位置存起来
    let obj = {
      leftLableName: this.leftLableName,
      rightLableName: this.rightLableName,
      currentPage: this.currentPage,
      sectionid: this.sectionid,
      labelId: this.labelId,
      tabRightIndex: this.tabRightIndex,
      tabIndex: this.tabIndex,
      rightlableList: this.rightlableList,
      articleInfoList: this.articleInfoList,
      totalPages:this.totalPages
    };
    sessionStorage.setItem("infoClaifyList", JSON.stringify(obj));
    setTimeout(function() {
      sessionStorage.removeItem("infoClaifyList");
      this.$store.commit("changeRecruitScrollY1", 0);
    }, 600000);
    next();
  },
  destroyed() {
  
  },
  methods: {
    infoHomePageMoreByProvince() {
      this.$loading('open');
      let obj = {
        pageNo: 1,
        pageSize: 15
      };
      infoHomePageMoreByProvince(obj).then(res => {
        this.articleInfoList = res.data;
        this.totalLength = res.data.length;
        if(this.totalLength===0){
          this.noDataText=""
          this.showBlank = true
        }else{
          this.noDataText="没有更多资讯了"
        }
    
        
        this.$hideLoading();
      });
    },
    //右边标签
    infosInSectionByProvince() {
      // this.$loading('open');
      infosInSectionByProvince({
        pageNo: 1,
        pageSize: 15,
        sectionId: this.sectionid,
        province: ls.get("userArea"),
        labelId: this.labelId
      })
        .then(res => {
          if (res.code == "0") {
            this.articleInfoList = res.data.articleInfo.data;
            this.totalPages = res.data.articleInfo.pageCount;
            if(this.articleInfoList.length===0){
              this.noDataText=""
              this.showBlank = true
             }else{
                 this.noDataText="没有更多资讯了"
             }
     
            
          }
    
          this.$hideLoading();
        })
        .catch(error => {
          this.$hideLoading();
          this.$vux.toast.text(error);
        });
    },
    clicklables(id, $index, name) {
      this.tabRightIndex = $index;
      this.labelId = id;
      this.currentPage = 1;
      this.lashen = "height:0";
      setTimeout(() => {
        this.zIn = "z-index:-1";
        this.rightLableName = name;
      }, 300);
      this.infosInSectionByProvince();
    },
    sectionTopicLabels() {
      let obj = {
        id: this.sectionid
      };
      sectionTopicLabels(obj).then(res => {
        if(res.code=='0'){
          this.rightlableList = this.rightlableList.concat(res.data);
        }
        
      });
    },

    tabLables(id, index, name) {
      this.tabIndex = index;
      this.sectionid = id;
      this.rightlableList = [{ name: "全部", id: null }];
      this.tabRightIndex=0;
      this.rightLableName= "标签";
      if (!id) {
        this.infoHomePageMoreByProvince();
        this.leftLableName= "全部";
        return false;
      }

      this.currentPage = 1;
      this.labelId = null;
      this.lashen1 = "height:0";
      setTimeout(() => {
        this.zIn1 = "z-index:-1";
        this.leftLableName = name;
      }, 300);
      this.sectionTopicLabels();

      this.infosInSectionByProvince();
    },
    infinite(done) {
      if (this.sectionid) {
        if (this.currentPage < this.totalPages) {
          this.currentPage = this.currentPage + 1;
          infosInSectionByProvince({
            pageNo: this.currentPage,
            pageSize: 15,
            sectionId: this.sectionid,
            province: ls.get("userArea"),
            labelId: this.labelId
          }).then(res => {
            let newArr = res.data.articleInfo.data;
            this.articleInfoList = this.articleInfoList.concat(newArr);
            this.totalPages = res.data.articleInfo.pageCount;
            done();
          });
        } else {
          done(true);
          return;
        }
      } else {
        if (this.totalLength > 0) {
          this.currentPage = this.currentPage + 1;
          infoHomePageMoreByProvince({
            pageNo: this.currentPage,
            pageSize: 15
          }).then(res => {
            let newArr = res.data;
            this.articleInfoList = this.articleInfoList.concat(newArr);
            this.totalLength = res.data.length;
            done();
          });
        } else {
          done(true);
          return;
        }
      }
    },

    sseRight() {
      this.showspecial = false;
      this.lashen1 = "height:0";
      setTimeout(() => {
        this.zIn1 = "z-index:-1";
      }, 300);
    },
    rightSort() {
      this.showArea = false;
      this.lashen = "height:0";
      this.zIn = "z-index:-1";
      this.showspecial = !this.showspecial;
      if (this.showspecial) {
        this.lashen1 = "height:3rem";
        this.zIn1 = "z-index:2;background: rgba(0, 0, 0, 0.5);";
      } else {
        this.lashen1 = "height:0";
        setTimeout(() => {
          this.zIn1 = "z-index:-1";
        }, 300);
      }
    },
    sse() {
      this.showArea = false;
      this.lashen = "height:0";
      setTimeout(() => {
        this.zIn = "z-index:-1";
      }, 300);
    },
    leftSort() {
      this.showspecial = false;
      this.lashen1 = "height:0";
      this.zIn1 = "z-index:-1";
      this.showArea = !this.showArea;
      if (this.showArea) {
        this.lashen = "height:5.8rem";
        this.show8 = true;
        this.zIn = "z-index:2; background: rgba(0, 0, 0, 0.5);";
      } else {
        this.show8 = false;
        this.lashen = "height:0";
        setTimeout(() => {
          this.zIn = "z-index:-1";
        }, 300);
      }
    },
    showTids(tids) {
      this.commonJs.gopush("infoDetail", tids);
    },
    refresh(done) {
      setTimeout(() => {
        done();
      }, 1500);
    },
  }
};
</script>

<style scoped lang="less">
 .noDataImage {
    text-align: center;
    padding-top: 2.4rem;
    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-bottom: 0.24rem;
    }
    .describe {
      color: #999;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }
  }
.info-classify {
  width: 100%;
  min-height: 100vh;
  background: #fff;
}
.right-box {
  height: 5.8rem;
  width: 100%;
  box-sizing: border-box;
}
.my-center {
  font-weight: 600;
}

.bgMask {
  position: absolute;
  top: 1.7rem;
  left: 0;
  width: 7.5rem;
  height: 100%;
  z-index: -1;

  .maskBox {
    width: 100%;
    height: 0rem;
    background: #fff;
    transition: height 0.3s;
    transition-timing-function: linear;
    overflow: hidden;
    position: relative;
    padding: 0 0.3rem;
    box-sizing: border-box;
    .lable-box {
      width: 100%;
      height: auto;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 3rem;
      overflow: hidden;
      span {
        width: 2rem;
        height: 0.8rem;
       background:rgba(247,247,250,1);
        text-align: center;
        line-height: 0.8rem;
        color: #36353b;
        font-size: 0.3rem;
        border-radius: 0.1rem;
        border: 1px solid rgba(247,247,250,1);
        // margin-top: 0.25rem;
      }
      .active {
        border: 1px solid @mainColor;
        
        color: @mainColor;
        background: #fff;
      }
    }
      .specich{
        justify-content:flex-start;
        height: auto;
        span{
          margin-right: 0.3rem;
          margin-top: 0.2rem;
        }
        
      }
    .right-lables {
      padding: 0 0.3rem;
      height: auto;
      span {
        margin-top: 0.2rem;
      }
    }
  }
}

.sort {
  width: 7.5rem;
  height: 0.92rem;
  text-align: center;
  line-height: 0.92rem;
  background: #fff;
  border-bottom: 1px solid rgba(229,232,237,1);

  div {
    i,
    span {
      display: inline-block;
      vertical-align: middle;
    }

    i {
      font-size: 0.26rem;
      color: #999;
    }
    .imgDown{
      margin-left: 0.1rem;
      width: 0.3rem; height: 0.3rem;
      background: url('~@/static/school_icon_arrow_down.png') no-repeat;
      background-size:100%;
    }
      .imgUp{
      margin-left: 0.1rem;
      width: 0.3rem; height: 0.3rem;
      background: url('~@/static/school_icon_arrow_up.png') no-repeat;
      background-size:100%;
    }

    // img {
    //   height: 0.3rem;
    //   width: auto;
    //   margin-left: 0.1rem;
    // }
  }
}

.mains {
  width: 100%;
  height: 100vh;
}
</style>
